<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
  <style>
    *{margin: 0px;padding: 0px;}
    /* 插入图片 */
    body{background-image: url(../public/7bd66e49fe7b745e0110e22ee0a5d50d.jpeg); 
    /* 图片平铺不重复 */
    background-size: cover ; }
    .juz{width:0;height:0;margin: auto; }
    .bs{width: 320px; height: 240px; background-color: aliceblue !important;}
    .center{margin-top: 100px;}
    .center,.ajax,.foot{width: 300px;height: 70px;margin-bottom: 20px;}
     .ajax{margin-top: -50px;}
    .foot{margin-top: 50px;}
     
    /* 居中区域宽度 */  
    .center{color: #000;;}
    .sm{
      width: 300px;
      height: 35px;margin:10px;
    }
    h2{margin-left: 35%;}
    a{color: #000;; margin-left: 10px;}
    button{margin-left: 5px;background-color: red;}
    
  </style>
</head>

<body>
  <div class="juz">
    <div class="bs">
  <!-- 登录大块 -->
<div class="center">
  <h2>用户登录</h2>
</div>
<!-- ajax交互部分 -->
<div class="ajax">
  <input type="text" placeholder="手机号/邮箱" class="sm">
  <input type="text" placeholder="密码" class="sm">
</div>   
 <!--页尾部分  -->
<div class="foot">
  <button class="sm"> <dd>登录</dd></button>
  <a href="./register.html" >注册账号</a>
  <a href="#" class="sm1">忘记密码</a>
</div> 
</div>
</div>
</body>

</html>